<template>
	<div>
		<div v-for="(blog, index) in blogs" :key="index" class="articles">
			<article class="post-block">
				<h2 class="post-title">
					<a :href="'?route=blog&title='+ blog.name +'&path=' + blog.path" class="post-link">{{ blog.name }}</a>
				</h2>
				<div class="post-info">{{ blog.path.match(/(.*)\/[^/]*$/)[1].replace("blog/", "") }}</div>
				<!-- <div class="post-info">{{ blog.changeTime | formatDate }}</div>
				<div class="post-entry" v-html="makeHtml(blog.content)"></div>
				<div class="post-meta">
					<a :href="'/blog/' + blog.route" class="article-more">
						<i v-if="blog.pageViews > fire" aria-hidden="true" class="fa fa-free-code-camp" style="color: red;font-weight: 800;"></i>
						<i v-else aria-hidden="true" class="fa fa-eye"></i>
						阅读量({{ blog.pageViews }})
						<i aria-hidden="true" class="fa fa-thumbs-up" style="margin-left: 20px;"></i>
						点赞量({{ blog.praise }})
					</a>
				</div>
			</article> -->
		</div>
		<paging_component :page="page" :route="route" :size="size" :total="total"></paging_component>
	</div>
</template>

<script>
	// 创建showdown实例（实现markdown转html）
	var converter = new showdown.Converter();
	module.exports = {
		name: "home",
		// 注意：httpVueLoader.js使用props传递参数时，需要参数名称全部小写（大小写混合情况，只能通过this.$attrs获取到属性值，但是不能建立props）
		props: ['route', 'fire', 'page', 'size'],
		data() {
			return {
				total: 0,
				blogs: [],
			}
		},
		created() {
			this.loadBlogs();
		},
		methods: {
			loadBlogs() {
				/* let this_ = this;
				axios.get('./directory.json', {
					params: {}
				}).then(function(response) {
					if (response.status == 200) {
						// 计算要展示的内容
						const startIndex = (this_.page - 1) * this_.size;
						const endIndex = startIndex + this_.size;
						this_.blogs = response.data.slice(startIndex, endIndex);
						this_.total = response.data.length;
					} else {
						layer.msg("服务异常");
					}
				}).catch(function(error) {
					layer.msg("服务异常");
				}); */
				// 计算要展示的内容
				const startIndex = (this.page - 1) * this.size;
				const endIndex = startIndex + this.size;
				this.blogs = blogs.slice(startIndex, endIndex);
				this.total = blogs.length;
			},
			makeHtml(text) {
				return converter.makeHtml(text);
			}
		},
		components: {
			'paging_component': 'url:./paging.vue',
		},
		filters: {
			formatDate(value) {
				let date = new Date(value);
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h;
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m;
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s;
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
			},
		}
	}
</script>

<style scoped>
	.post-entry * {
		font-size: 12px;
	}
</style>
